<template>
    <div>
        <div style="text-align: right;">
            <span style="margin-right: 10px;">
                <el-select v-model="templateValue" clearable placeholder="请选择">
                    <el-option v-for="item in templateOptions" :key="item.id" :label="item.templateName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="handleUpdate">更新/保存模板</el-button>
            <el-button type="danger" @click="clickDelete" :disabled="!templateValue">删除该模板</el-button>
        </div>
        <div style="margin-bottom: 20px;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">拼多多</el-menu-item>
            </el-menu>
        </div>
        <div>
            <el-form :model="formData" :rules="rules" ref="formData" label-width="180px" class="demo-formData">
                <el-row :gutter="80">
                    <el-col :span="12">
                        <el-form-item label="两件折扣" prop="pddLJZK">
                            <el-input-number v-model="formData.pddLJZK" :controls="false" style="width: 100%;" :min="50"
                                :max="99" placeholder="请输入两件的折扣价,可选范围5~9.9，9.5表示9.5折,5表示5折"></el-input-number>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单卖价高于拼团价多少元" prop="pddPriceAbo">
                            <el-input-number v-model="formData.pddPriceAbo" placeholder="请输入单卖价高于拼团价格多少元" :min="0"
                                :max="+releaseInfo.common.price" :controls="false"
                                style="width: 100%;"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图片上传模式" prop="pddImageUploadType">
                            <el-select v-model="formData.pddImageUploadType" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in uploadTypeList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="款式" prop="pddSJKKS">
                            <el-select v-model="formData.pddSJKKS" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in kuanShiOptions" :key="item.vid" :label="item.value"
                                    :value="item.vid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="风格" prop="pddSJKFG">
                            <el-select v-model="formData.pddSJKFG" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in fengGeOptions" :key="item.vid" :label="item.value"
                                    :value="item.vid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="保护套质地" prop="pddSJKBHTZD">
                            <el-select v-model="formData.pddSJKBHTZD" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="item in baoHuOptions" :key="item.vid" :label="item.value"
                                    :value="item.vid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="自定义规格名称" prop="name">
                            <el-select v-model="formData.specName1" placeholder="请选择"
                                style="width: 240px;margin-right: 10px;">
                                <el-option v-for="item in guiGeOptions1" :key="item.vid" :label="item.value"
                                    :value="item.vid">
                                </el-option>
                            </el-select>
                            <el-select v-model="formData.specName2" placeholder="请选择" style="width: 240px;">
                                <el-option v-for="item in guiGeOptions2" :key="item.vid" :label="item.value"
                                    :value="item.vid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发货时效" prop="pddShipmentsAging">
                            <el-radio-group v-model="formData.pddShipmentsAging">
                                <el-radio label="0">当日发货</el-radio>
                                <el-radio label="1">24小时</el-radio>
                                <el-radio label="2">48小时</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="规格顺序" prop="pddSpecOrder">
                            <el-radio-group v-model="formData.pddSpecOrder">
                                <el-radio label="1">款式在前,型号在后</el-radio>
                                <el-radio label="2">型号在前,款式在后</el-radio>
                            </el-radio-group>
                            <el-button type="text" style="margin-left: 10px;">说明</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="假一赔十" prop="pddJYPS">
                            <el-switch v-model="formData.pddJYPS"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主图自动补全" prop="pddMasterPicFill">
                            <el-switch v-model="formData.pddMasterPicFill"></el-switch>
                            <el-button type="text" style="margin-left: 10px;">说明</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="流行元素" prop="pddSJKLXYS">
                            <el-checkbox-group v-model="formData.pddSJKLXYS">
                                <el-checkbox v-for="(item, index) in liuXingOptions" :key="item.vid" :label="item.vid">
                                    {{ item.value
                                    }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { productPropertyTemplateList, updateOrAddProductPropertyTemp, deleteProductPropertyTempById, getNodeData } from "@/api/product/productInfo";
export default {
    props: {
        releaseItem: {
            type: Object,
            default: {}
        },
        releaseInfo: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            activeIndex: '1',
            checkList: [],
            uploadTypeList: [
                { label: '商品图片上传至平台图库空间(不占用店铺的图片空间)', value: 0 },
                { label: '商品图片上传至店铺图库空间(将占用店铺图片空间的存储)', value: 1 },
            ],
            templateValue: '',
            templateOptions: [{
                value: '0',
                label: '平台默认模板'
            }],
            formData: {
                pddSJKLXYS: [],
            },
            formPdd: {},
            rules: {
                pddLJZK: [{ required: true, message: '请输入', trigger: 'change' }],
                pddPriceAbo: [{ required: true, message: '请输入', trigger: 'change' }],
                pddSJKKS: [{ required: true, message: '请输入', trigger: 'change' }],
                pddSJKBHTZD: [{ required: true, message: '请输入', trigger: 'change' }],
            },
            accessToken: '',
            kuanShiOptions: [],
            fengGeOptions: [],
            baoHuOptions: [],
            liuXingOptions: [],
            guiGeOptions1: [],
            guiGeOptions2: [],
        }
    },
    watch: {
        templateValue(val) {
            if (val) {
                const paramJson = JSON.parse(this.templateOptions.filter(item => item.id == val)[0].paramJson)
                const catId = this.releaseInfo.common.catId
                this.formData = paramJson[catId] || {}
                console.log('formData', this.formData);
                this.formPdd = paramJson.common
                this.formData.pddSJKLXYS = this.formData.pddSJKLXYS || []
            } else {
                this.formData = {
                    pddSJKLXYS: [],
                }
                // this.formData.pddSJKLXYS = this.formData.pddSJKLXYS || []
                // this.formData.pddSJKLXYS = [111]
            }
        }

    },
    mounted() {
        if (this.releaseInfo.accessToken) {
            this.accessToken = this.releaseInfo.accessToken
        }
        const shopId = this.releaseInfo.common.shopId
        this.productPropertyTemplateList()
        this.getKuanShi(shopId)
        this.getFengGe(shopId)
        this.getBaohu(shopId)
        this.getLiuxing(shopId)
        this.getGuige1(shopId)
        this.getGuige2(shopId)

    },
    methods: {
        productPropertyTemplateList() {
            productPropertyTemplateList(this.releaseInfo.common.shopId).then(res => {
                this.templateOptions = res.value
            })
        },
        handleUpdate() {
            this.$refs['formData'].validate((vaild) => {
                if (vaild) {
                    let params = {}
                    const catId = this.releaseInfo.common.catId
                    if (this.templateValue) {
                        let templateName = this.templateOptions.filter(item => item.id == this.templateValue)[0].templateName
                        let templateId = this.templateOptions.filter(item => item.id == this.templateValue)[0].id
                        params = {
                            paramJson: JSON.stringify({
                                [catId]: this.formData,
                                common: this.formPdd,
                            }),
                            templateName,
                            id: templateId
                        }
                        this.updateOrAddProductPropertyTemp(params)
                    } else {
                        this.$prompt('请输入模板名称', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(ev => {
                            params = {
                                paramJson: JSON.stringify({ [catId]: this.formData,  common: this.formPdd }),
                                templateName: ev.value
                            }
                            this.updateOrAddProductPropertyTemp(params)
                        })
                    }
                }
            })
        },
        updateOrAddProductPropertyTemp(params) {
            updateOrAddProductPropertyTemp(params).then(res => {
                this.$message.success('更新操作成功')
                this.productPropertyTemplateList()
                console.log('res', res);
            })
        },
        clickDelete() {
            this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteProductPropertyTempById(this.templateValue).then(res => {
                    this.templateValue = ''
                    this.$message.success('删除模板成功')
                    this.productPropertyTemplateList()
                })
            })
        },
        handleEmitData() {
            let nextState = false
            this.$refs['formData'].validate((vaild) => {
                if (vaild) {
                    const copyData = JSON.parse(JSON.stringify(this.formData))
                    copyData.pddSJKKS = this.kuanShiOptions.filter(item => item.vid == this.formData.pddSJKKS)[0]
                    copyData.pddSJKFG = this.fengGeOptions.filter(item => item.vid == this.formData.pddSJKFG)[0]
                    copyData.pddSJKBHTZD = this.baoHuOptions.filter(item => item.vid == this.formData.pddSJKBHTZD)[0]
                    copyData.specName1 = this.guiGeOptions1.filter(item => item.vid == this.formData.specName1)[0]
                    copyData.specName2 = this.guiGeOptions2.filter(item => item.vid == this.formData.specName2)[0]
                    copyData.pddSJKLXYS = []
                    this.liuXingOptions.forEach(item => {
                        this.formData.pddSJKLXYS.forEach(dom => {
                            if (item.vid == dom) {
                                copyData.pddSJKLXYS.push(item)
                            }
                        });
                    });

                    this.$emit('send', copyData);
                    nextState = true
                } else {
                    nextState = false
                }
            })
            return nextState
        },
        getKuanShi(shopId) {
            getNodeData('3045-ks', this.accessToken, shopId).then(res => {
                this.kuanShiOptions = res.value
            })
        },
        getFengGe(shopId) {
            getNodeData('3045-fg', this.accessToken, shopId).then(res => {
                this.fengGeOptions = res.value
            })
        },
        getBaohu(shopId) {
            getNodeData('3045-bhtzd', this.accessToken, shopId).then(res => {
                this.baoHuOptions = res.value
            })
        },
        getLiuxing(shopId) {
            getNodeData('3045-lxys', this.accessToken, shopId).then(res => {
                this.liuXingOptions = res.value
            })
        },
        getGuige1(shopId) {
            getNodeData('3045-specName1', this.accessToken, shopId).then(res => {
                this.guiGeOptions1 = res.value
            })
        },
        getGuige2(shopId) {
            getNodeData('3045-specName2', this.accessToken, shopId).then(res => {
                this.guiGeOptions2 = res.value
            })
        },
        handleSelect() {

        }
    }
}
</script>

<style lang="scss" scope></style>